<template>
  <div>
    <el-alert close-text="Get!" style="margin-bottom: 10px" type="info">
      <div>1、单击表格行，可以显示详细数据；</div>
      <div>2、双击表格行，可以恢复对应数据。</div>
    </el-alert>
    <el-table v-loading="listLoading" :data="list" border element-loading-text="Loading" fit height="200px" highlight-current-row size="mini" @row-click="clickRow" @row-dblclick="dblclickRow">
      <el-table-column align="center" label="ID" prop="id" width="80">
        <template v-slot="{row}">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column label="用例名称" prop="name">
        <template v-slot="{row}">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="更改于" prop="name" width="200px">
        <template v-slot="{row}">
          {{ row.createdAt | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="更改由" prop="name" width="120px">
        <template v-slot="{row}">
          {{ row.historyDesigner }}
        </template>
      </el-table-column>
    </el-table>
    <div style="overflow-y:auto; margin-top: 10px; border: 1px solid #ebeef5; height: 400px;">
      <manual-component
        v-show="caseType === 1"
        ref="manualComponent"
        v-model="value"
        :readonly="readonly"
      />
      <automated-component
        v-show="caseType === 3 || caseType === 4"
        ref="automatedComponent"
        v-model="value"
        :readonly="readonly"
      />
    </div>
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import { selectByTestCaseId } from '@/api/functional_test/test_case_manage/test_case_history'

export default {
  components: {
    ManualComponent: () => import('@/components/functional_test/TestCase/manual.vue'),
    AutomatedComponent: () => import('@/components/functional_test/TestCase/automated.vue')
  },
  props: {
  },
  data() {
    return {
      caseType: null,
      readonly: true,
      value: {
        type: Object,
        default() {
          return {
            catalogId: 0, // 分类 id
            textMode: false // 文本模式编辑
          }
        }
      },
      listLoading: false, // 列表加载状态
      list: [], // 列表数据
      clickTime: null // 单击计时器（为了避免双击时会触发两次单击问题）
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 装载数据
    loadData(testCaseId) {
      this.listLoading = true
      selectByTestCaseId({
        projectId: this.$store.getters.projectId,
        testCaseId: testCaseId
      }).then(response => {
        this.list = response.data
        this.listLoading = false
        this.caseType = null
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 单击 表格行
    clickRow(row) {
      clearTimeout(this.clickTime) // 清除 单击计时器
      this.clickTime = setTimeout(() => {
        this.$nextTick(() => {
          this.caseType = row.type
          if (this.caseType === 1) { // 测试用例
            this.$refs.manualComponent.setElement(this.historyToElement(row))
          } else if (this.caseType === 3 || this.caseType === 4) { // 接口测试用例、公共步骤
            this.$refs.automatedComponent.setElement(this.historyToElement(row))
          }
        })
      }, 300) // 大概时间 300 ms
    },
    // 双击 表格行
    dblclickRow(row) {
      clearTimeout(this.clickTime) // 清除 单击计时器
      this.$emit('dblclickResultRow', this.historyToElement(row))
    },
    // 将 history 数据转换成 element 数据
    historyToElement(row) {
      const element = deepClone(row) // 深拷贝 row

      element.id = element.testCaseId
      element.steps = element.stepHistories
      delete element.testCaseId
      delete element.historyDesigner
      delete element.stepHistories

      this.recursionStepHistoryToStepElement(element.steps) // 递归将 StepHistory 转为 StepElement

      return element
    },
    /**
     * 递归将 StepHistory 转为 StepElement
     * @param steps step 列表
     */
    recursionStepHistoryToStepElement(steps) {
      for (const step of steps) {
        step.id = step.stepId
        delete step.stepId
        delete step.testCaseHistoryId
        delete step.historyParentId

        if (step.childSteps.length > 0) {
          this.recursionStepHistoryToStepElement(step.childSteps) // 递归将 StepHistory 转为 StepElement
        }
      }
    }
  }
}
</script>
